<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>RestBox</title>

    <!-- CSS -->

    <!-- JQuery Layout -->
    <link type="text/css" rel="stylesheet" href="../../css/jquery/layout-default-latest.css"/>
    <!-- Bootstrap -->
    <link href="../../css/bootstrap.min.css" rel="stylesheet">

    <!-- Javascript -->
    <!-- Bootstrap -->
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!-- JQuery Layout -->
    <script type="text/javascript" src="js/jquery/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jquery/jquery-ui-latest.js"></script>
    <script type="text/javascript" src="js/jquery/jquery.layout-latest.js"></script>
    <script type="text/javascript" src="js/jquery/debug.js"></script>

    <script type="text/javascript">

        function toggleLiveResizing() {
            $.each($.layout.config.borderPanes, function (i, pane) {
                var o = myLayout.options[ pane ];
                o.livePaneResizing = !o.livePaneResizing;
            });
        }

        function toggleStateManagement(skipAlert, mode) {
            if (!$.layout.plugins.stateManagement) return;

            var options = myLayout.options.stateManagement
                    , enabled = options.enabled // current setting
                    ;
            if ($.type(mode) === "boolean") {
                if (enabled === mode) return; // already correct
                enabled = options.enabled = mode
            }
            else
                enabled = options.enabled = !enabled; // toggle option

            if (!enabled) { // if disabling state management...
                myLayout.deleteCookie(); // ...clear cookie so will NOT be found on next refresh
                if (!skipAlert)
                    alert('This layout will reload as the options specify \nwhen the page is refreshed.');
            }
            else if (!skipAlert)
                alert('This layout will save & restore its last state \nwhen the page is refreshed.');

            // update text on button
            var $Btn = $('#btnToggleState'), text = $Btn.html();
            if (enabled)
                $Btn.html(text.replace(/Enable/i, "Disable"));
            else
                $Btn.html(text.replace(/Disable/i, "Enable"));
        }
        var myLayout;

        $(document).ready(function () {

            // this layout could be created with NO OPTIONS - but showing some here just as a sample...
            // myLayout = $('body').layout(); -- syntax with No Options

            myLayout = $('body').layout({

                //	reference only - these options are NOT required because 'true' is the default
                closable: true	// pane can open & close
                , resizable: true	// when open, pane can be resized
                , slidable: true	// when closed, pane can 'slide' open over other panes - closes on mouse-out
                , livePaneResizing: true

                //	some resizing/toggling settings
                , north__resizable: false	// OVERRIDE the pane-default of 'resizable=true'
                , north__spacing_open: 0		// no resizer-bar when open (zero height)
                , south__resizable: false	// OVERRIDE the pane-default of 'resizable=true'
                , south__spacing_open: 0		// no resizer-bar when open (zero height)
                , east__closable: false
                , east__spacing_open: 4		// no resizer-bar when open (zero height)
                , west__spacing_open: 4		// no resizer-bar when open (zero height)

                //	some pane-size settings
                , west__size: .15, east__size: .425

                //	some pane animation settings
                , west__animatePaneSizing: false, west__fxSpeed_size: "fast"	// 'fast' animation when resizing west-pane
                , west__fxSpeed_open: 500	// 1-second animation when opening west-pane
                , west__fxSpeed_close: 500	// 1-second animation when opening west-pane

                //	enable showOverflow on west-pane so CSS popups will overlap north pane
                , west__showOverflowOnHover: true

                //	enable state management
                , stateManagement__enabled: true // automatic cookie load & save enabled by default

                , showDebugMessages: true // log and/or display messages from debugging & testing code
            });

            // Load div container by ajax
            $("#headerContainer").load("header/load.htm");
            $("#sideMenuContainer").load("sideMenu/load.htm");
            $("#requestContainer").load("request/load.htm");
            $("#footerContainer").load("footer/load.htm");

            // if there is no state-cookie, then DISABLE state management initially
            var cookieExists = !$.isEmptyObject(myLayout.readCookie());
            if (!cookieExists) toggleStateManagement(true, false);

            // 'Reset State' button requires updated functionality in rc29.15+
            if ($.layout.revision && $.layout.revision >= 0.032915)
                $('#btnReset').show();

        });

    </script>
</head>
<body>

<!-- Div for header container -->
<div id="headerContainer" class="ui-layout-north">
</div>

<!-- Div for Side Tree Menu -->
<div id="sideMenuContainer" class="ui-layout-west">
</div>

<!-- Div for request container -->
<div id="requestContainer" class="ui-layout-center">
</div>

<!-- Div for response container -->
<div id="responseContainer" class="ui-layout-east">
</div>

<!-- Div for footer container -->
<div id="footerContainer" class="ui-layout-south">
</div>

</body>
</html>